.grid {
    display: flex;
    flex-wrap: wrap;
    margin-right: -1 * $gutter;
    margin-left: -1 * $gutter;
    margin-top: -1 * $gutter;
}

.grid > .col,
.grid > [class*="col"] {
    box-sizing: border-box;
}

.grid-nogutter {
    margin-right: 0;
    margin-left: 0;
    margin-top: 0;
}

.grid-nogutter > .col,
.grid-nogutter > [class*="col-"] {
    padding: 0;
}

.col {
    flex-grow: 1;
    flex-basis: 0;
    padding: $gutter;
}

.col-fixed {
    flex: 0 0 auto;
    padding: $gutter;
}

$grid-columns: (
    "col-1": 8.3333%,
    "col-2": 16.6667%,
    "col-3": 25%,
    "col-4": 33.3333%,
    "col-5": 41.6667%,
    "col-6": 50%,
    "col-7": 58.3333%,
    "col-8": 66.6667%,
    "col-9": 75%,
    "col-10": 83.3333%,
    "col-11": 91.6667%,
    "col-12": 100%
);

$grid-column-offsets: (
    "col-offset-0": 0,
    "col-offset-1": 8.3333%,
    "col-offset-2": 16.6667%,
    "col-offset-3": 25%,
    "col-offset-4": 33.3333%,
    "col-offset-5": 41.6667%,
    "col-offset-6": 50%,
    "col-offset-7": 58.3333%,
    "col-offset-8": 66.6667%,
    "col-offset-9": 75%,
    "col-offset-10": 83.3333%,
    "col-offset-11": 91.6667%,
    "col-offset-12": 100%,
);

@each $col,$width in $grid-columns {
    .#{$col} {
        flex: 0 0 auto;
        padding: $gutter;
        width: #{$width};
    }
}

@each $key, $val in $breakpoints {
    @media screen and (min-width: #{$val}) {
        .#{$key + $separator} {
            @each $col,$width in $grid-columns {
                &#{$col} {
                    flex: 0 0 auto;
                    padding: $gutter;
                    width: #{$width};
                }
            }
        }
    }
}

@include style-class('margin-left', $grid-column-offsets, true);